<template>
<div class="cate-list-container">
  <div class="header-utils">
    <a-button class="editable-add-btn" style="margin-bottom: 8px;margin-right: 8px" @click="handleAdd">Add</a-button>
    <a-button class="editable-add-btn" type="primary" danger style="margin-bottom: 8px;margin-right: 8px" @click="handleDelete">删除选中行</a-button>
  </div>
  <a-table v-if="data.length!==0" :expandRowByClick="true" :defaultExpandAllRows="true" :columns="columns" :data-source="data" :row-selection="rowSelection">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key == 'util' ">
        <a-button type="dashed">未做功能</a-button>
      </template>
    </template>
  </a-table>
</div>
</template>

<script lang="ts" setup>
import {getCateList,deleteCate} from '@/api/cate'
import {computed, onMounted, reactive, ref} from 'vue';
import {message} from "ant-design-vue";
import {translateTree} from '@/utils/utils'
import { ExclamationCircleOutlined,ExclamationCircleTwoTone} from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import { Modal } from 'ant-design-vue';

const columns = [
  {
    title: '分类名称',
    dataIndex: 'cateName',
    key: 'name',
  },
  {
    title: '分类描述',
    dataIndex: 'cateDesc',
    key: 'cateDesc',
  },
  {
    title: '包含文章(ID)',
    dataIndex: 'cateArticles',
    width: '30%',
    key: 'cateArticles',
  },{
    title: "操作",
    dataIndex: "util",
    key:"util"
  }
];

interface DataItem {
  cateId: number;
  cateName: string;
  cateDesc: string;
  cateArticles: Array<string>;
  children?: DataItem[];
}

let data = ref<DataItem[]>([])

const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    let ids:Array<number|string> = []
    selectedRows.map(item => ids.push(item.cateId))
    let _ids = [...new Set(ids)]
    deleteList.value = _ids
  },
  // 全选
  onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
    if(selected) {
      let ids:Array<number|string> = []
      selectedRows.map(item => ids.push(item.cateId))
      deleteList.value = ids
      message.success('已经全部选中')
      return
    }
    deleteList.value = []
    message.warn('取消全选')
  },
});



let deleteList = ref<Array<number|string>>([])
// 删除选中行
let handleDelete = () => {
  Modal.confirm({
    title: 'Are you sure delete this task?',
    icon: createVNode(ExclamationCircleOutlined),
    content: 'Some descriptions',
    okText: 'Yes',
    okType: 'danger',
    cancelText: 'No',
    onOk() {
      okHandler()
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}

// add
let handleAdd = () => {
  Modal.confirm({
    title: '未定义',
    icon: createVNode(ExclamationCircleTwoTone),
    content: '暂时还没有功能',
    okText: 'Yes',
    okType: 'primary',
    cancelText: 'No',
    onOk() {

    },
    onCancel() {
      console.log('Cancel');
    },
  });
}

let okHandler = async () => {
  if(deleteList.value.length == 0) return message.error('请先勾选要删除的分类')
  try {
    let done:any = await deleteCate(deleteList.value)
    if(done.code == 200){
      message.success('删除分类成功')
      requestCateList()
    }else {
      message.error(done.message)
    }
  }catch (e:any) {
    message.error(e.message)
  }
}






// getCateList
const requestCateList = async (): Promise<any> => {
  try {
    let res:any = await getCateList()
    let cates = translateTree(res.cates,0)
    data.value = cates
  }catch (e:any) {
    message.error(e.message)
  }
}

onMounted(() =>{requestCateList()})

</script>

<style lang="scss" scoped>
.header-utils {
  display: flex;
  justify-content: flex-end;
}
.cate-list-container {
  padding: 10px;
}


















.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
